<div class="modal-header">
    <h4 *ngIf="health" class="modal-title" id="showHealthLabel">
        {{ 'health.indicator.' + health.key | translate }}
    </h4>

    <button (click)="dismiss()" aria-label="Close" class="close" data-dismiss="modal" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="modal-body pad">
    <div *ngIf="health">
        <h5 jhiTranslate="health.details.properties">Properties</h5>

        <div class="table-responsive">
            <table aria-describedby="showHealthLabel" class="table table-striped">
                <thead>
                <tr>
                    <th class="text-left" jhiTranslate="health.details.name" scope="col">Name</th>
                    <th class="text-left" jhiTranslate="health.details.value" scope="col">Value</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let healthDetail of health.value.details | keys">
                    <td class="text-left">{{ healthDetail.key }}</td>
                    <td class="text-left">{{ readableValue(healthDetail.value) }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal-footer">
    <button (click)="dismiss()" class="btn btn-secondary float-left" data-dismiss="modal" type="button">Done</button>
</div>
